<template>
  <div class="menu-container">
    <template v-for="v in menuList">
      <el-submenu
        v-if="v.children && v.children.length > 0"
        :index="v.name"
        :key="v.name"
      >
        <template slot="title">
          <!-- <i
                      class='iconfont'
                      :class='v.meta.icon'
                    ></i> -->
          <i class="iconfont" :class="'el-icon-' + v.icon"></i>
          <span>{{ v.label }}</span>
        </template>
        <el-menu-item-group>
          <dynamic-menu :menuList="v.children"></dynamic-menu>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item :key="v.name" :index="v.name" @click="gotoRoute(v)" v-else>
        <!-- <i
                  class='iconfont'
                  :class='v.meta.icon'
                ></i> -->
        <i class="iconfont" :class="'el-icon-' + v.icon"></i>
        <span slot="title">{{ v.label }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "DynamicMenu",
  props: {
    menuList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  computed: {
    ...mapState({
      currentMenu: state => state.tab.currentMenu
    })
  },
  methods: {
    ...mapMutations({
      selectMenu: "selectMenu"
    }),
    gotoRoute(val) {
      if (this.currentMenu.name !== val.name) {
        this.$router.push({ name: val.name });
      }
      this.selectMenu(val);
    }
  }
};
</script>
<style lang="scss">
.menu-container {
  .svg-icon {
    margin-right: 10px;
  }
}
</style>
